<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  value: {
    type: String,
    default: '',
  },
  icon: {
    type: String,
    default: '',
  },
  isLink: {
    type: Boolean,
    default: false,
  },
  to: {
    type: String,
    default: '',
  },
  border: {
    type: Boolean,
    default: true,
  },
  color: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['click'])

const titleRef = ref(props.title)
const valueRef = ref(props.value)
function handleClick() {
  emit('click')
  if (props.isLink && props.to) {
    uni.navigateTo({
      url: props.to,
    })
  }
}
</script>

<template>
  <view class="cell" :class="{ 'border-bottom': border }" @click="handleClick">
    <view class="cell__title">
      <wd-icon v-if="icon" :name="icon" custom-class="mr-10rpx" size="40rpx" />
      <view v-if="titleRef">
        {{ titleRef }}
      </view>
      <view v-else>
        <slot name="title" />
      </view>
    </view>
    <view class="cell__value" :style="{ color }">
      <view v-if="valueRef">
        {{ valueRef }}
      </view>
      <view v-else>
        <slot name="value" />
      </view>
      <wd-icon v-if="isLink" name="arrow-right" custom-class="ml-10rpx" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.border-bottom {
  border-bottom: 1rpx solid #f5f5f5;
}
.cell {
  padding: 30rpx;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  &__title {
    display: flex;
    align-items: center;
  }
  &__value {
    display: flex;
    align-items: center;
    color: #969799;
  }
}
</style>
